// Top Menu
.currentPage {
    font-weight: bold;
    display: none;
    margin-right: @ipSpaceGroup;
}
.topmenuToggle {
    background: @ipLinkColor url(img/icon_menu.png) no-repeat center center;
    border-radius: 3px;
    color: @ipLinkColor;
    display: none;
    margin-top: @ipSpaceGlobal;
    padding: (@ipSpaceElement * 0.75) (@ipSpaceElement * 1.5);
}
.topmenu {
    float: right;
    font-size: @ipFontSize;
    margin-top: @ipSpaceGlobal;

    ul {
        display: inline;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    li {
        position: relative;
    }

    .level1 > li {
        display: inline-block;
    }

    a {
        color: @ipLinkColor;
        display: block;
        padding: (@ipSpaceElement / 2) @ipSpaceElement;
        white-space: nowrap;

        &:hover {
            text-decoration: underline;
        }
    }

    .active > a {
        font-weight: bold;
    }

    .crumb > a {
        color: @ipTextColor;
        font-weight: bold;
    }

    .parent > a {
        padding-right: 30px;

        &:after {
            content: '\25BC';
            position: absolute;
            right: 5px;
        }
    }

    .level1 ul {
        background-color: @ipBackgroundColor;
        border: 1px solid @ipBorderColor;
        box-shadow: 0 1px 3px rgba(0,0,0,.5);
        display: none;
        position: absolute;
        z-index: 2000; //should be higher than widget controls
    }
    li:hover > ul {
        display: block;
    }
    .level2 {
        ul { // infinite number of levels down
            margin-left: 100%;
            top: 0;
        }
    }
}
.topmenuPopup {
    background-color: @ipBackgroundColor;
    border: 1px solid @ipBorderColor;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    left: 0;
    margin-top: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}

.languages {
    display: inline-block;
    margin-left: (@ipSpaceGroup * 2);

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    li {
        display: inline-block;
    }
    a {
        color: @ipLinkColor;
        display: block;
        padding: (@ipSpaceElement / 2) (@ipSpaceElement / 4);
        white-space: nowrap;

        &:hover {
            text-decoration: underline;
        }
    }
    .active a {
        font-weight: bold;
    }
}

// Side Menu
.sidenav {
    nav {
        font-size: @ipFontSize;

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul ul { // pushing inner levels to the right
            margin-left: @ipSpaceElement;
        }

        a {
            color: @ipLinkColor;
            display: block;
            margin-bottom: @ipSpaceGroup;

            &:hover {
                text-decoration: underline;
            }
        }

        .active > a {
            font-weight: bold;
        }

        .crumb > a {
            color: @ipTextColor;
            font-weight: bold;
        }

        // .side nav.collapse
        &.collapse {
            .level1 ul { // "collapse" class force menu to hide 2nd level until parent or child is not selected
                display: none;
            }

            .active, .crumb {
                > ul { // displaying one level deeper
                    display: block;
                }
            }
        }
    }
}

// changing behavior on mobile devices
@media screen and (max-width: (@screenMedium - 1px)) {
    .currentPage,
    .topmenuToggle {
        display: inline-block;
    }
    .topmenu {
        .topmenuPopup;

        .level1 ul {
            border: none;
            box-shadow: none;
            margin: 0 @ipSpaceGroup;
            position: static;
        }
        .level1 > li {
            display: list-item;
        }
    }
    .languages {
        border-top: 1px solid @ipBorderColor;
        display: block;
        margin-left: 0;

        a {
            padding: (@ipSpaceElement / 2) @ipSpaceElement;
        }
    }
}
